import { FC, PropsWithChildren } from 'react'
import { CSSTransition } from 'react-transition-group'

import styles from './Modal.module.less'

interface Props extends PropsWithChildren {
  visible: boolean
  onClose: () => void
}

const Modal: FC<Props> = ({ children, visible, onClose }) => {
  return (
    <CSSTransition in={visible} timeout={200} classNames="modal" unmountOnExit>
      <div className={styles.modal}>
        <div className={styles.modalContent}>
          <header>
            <button onClick={onClose}>close</button>
          </header>
          {children}
        </div>
      </div>
    </CSSTransition>
  )
}

export default Modal
